<template>
  <div>
    <!-- -----------------------------------------------------基本信息-------------------------------------------------------------- -->
    <el-divider>基本信息</el-divider>
    <div class="dialog_left">
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="采购标题">{{ form.title || '-' }}</el-descriptions-item>
        <el-descriptions-item label="采购品类">{{ ['设备采购', '物料采购'][form.type] }}</el-descriptions-item>
        <el-descriptions-item label="期望供货日期">{{ form.desiredDeliveryTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="购置理由">{{ form.reason || '-' }} </el-descriptions-item>
        <el-descriptions-item label="采购类型">{{ ['常规采购', '比价采购'][form.purchaseType] }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ form.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- ---------------------------------------------------物料采购表格----------------------------------------------------------- -->
    <div v-if="form.purchaseType == 0">
      <div v-if="form.type == 1" class="dialog_table">
        <el-table :data="form.purchaseConsumableVos" style="width: 100%">
          <el-table-column label="序号" width="100">
            <template slot-scope="scope">
              <div> {{ scope.$index + 1 }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="consPriceAndAmountVo.materialNum" label="编号" width="180" />
          <el-table-column prop="consPriceAndAmountVo.materialName" label="名称" show-overflow-tooltip />
          <el-table-column prop="consPriceAndAmountVo.typeName" label="类别" />
          <el-table-column prop="consPriceAndAmountVo.model" label="规格型号" show-overflow-tooltip>
            <template slot-scope="{row}">
              <div> {{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.model || '-' }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="consPriceAndAmountVo.supplierName" label="供应商" show-overflow-tooltip />
          <el-table-column prop="consPriceAndAmountVo.unitName" label="单位" />
          <el-table-column prop="price" label="单价（元）" />
          <el-table-column prop="amount" label="采购数量" />
          <el-table-column prop="consPriceAndAmountVo.amount" label="库存数量">
            <template slot-scope="{row}">
              <div> {{ row.consPriceAndAmountVo && row.consPriceAndAmountVo.amount || '0' }} </div>
            </template>
          </el-table-column>
          <el-table-column label="合计（元）">
            <template slot-scope="scope">
              <div> {{ totalPrice(scope.row.price, scope.row.amount) }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="overplusAmount" label="待入库数量">
            <template slot-scope="{row}">
              <div> {{ row.overplusAmount || '0' }} </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- ---------------------------------------------------设备采购表格----------------------------------------------------------- -->
      <div v-if="form.type == 0" class="dialog_table">
        <el-table :data="form.purchaseEquipmentVos" style="width: 100%">
          <el-table-column label="序号" width="100">
            <template slot-scope="scope">
              <div> {{ scope.$index + 1 }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseEquipmentBaseVo.equipmentName" label="设备名称" show-overflow-tooltip />
          <el-table-column prop="purchaseEquipmentBaseVo.typeName" label="类别" />
          <el-table-column prop="purchaseEquipmentBaseVo.brand" label="品牌" />
          <el-table-column prop="purchaseEquipmentBaseVo.supplierName" label="供应商" show-overflow-tooltip />
          <el-table-column prop="price" label="采购单价" />
          <el-table-column prop="purchaseEquipmentBaseVo.unitName" label="单位" />
          <el-table-column prop="purchaseEquipmentBaseVo.model" label="规格型号" show-overflow-tooltip />
          <el-table-column prop="acceptanceFlag" label="验收状态">
            <template slot-scope="scope">
              <div> {{ ['已验收', '未验收', '验收中'][scope.row.acceptanceFlag] }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="purchaseTime" label="申购时间" show-overflow-tooltip />
          <el-table-column prop="purchaseEquipmentBaseVo.remark" label="备注" show-overflow-tooltip>
            <template slot-scope="{row}">
              <div> {{ row.purchaseEquipmentBaseVo && row.purchaseEquipmentBaseVo.remark || '-' }} </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="form.purchaseType == 1">
      <el-divider>采购信息</el-divider>
      <div v-if="form.type == 0">
        <el-table :data="form.purchaseEquipmentBases" style="width: 100%" max-height="550px">
          <el-table-column label="序号" width="100">
            <template slot-scope="scope">
              <div> {{ scope.$index + 1 }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="equipmentName" label="设备名称" width="160" />
          <el-table-column prop="brand" label="设备品牌" width="160" />
          <el-table-column prop="typeName" label="设备类别" width="160">
            <template slot-scope="{row}">
              <div>{{ row. typeName||'-'}} </div>
            </template>
          </el-table-column>
          <el-table-column prop="model" label="设备规格型号" width="160" />
          <el-table-column label="是/否计量设备" width="160">
            <template slot-scope="{row}">
              <div>{{ ['是', '否'][row.meterageFlag] }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="meterageNum" label="计量编号" width="160">
            <template slot-scope="{row}">
              <div> {{ row.meterageNum || '-' }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="meterageNum" label="备注" width="160">
            <template slot-scope="{row}">
              <div> {{ row.remark || '-' }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="meterageNum" label="设备附件" width="160">
            <template slot-scope="scope">
              <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href=" scope.row.file"
                target="_blank">
                附件资料</el-link>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="220">
            <template slot-scope="scope">
              <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelectImage(scope.row.image)">
                图片
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="form.type == 1" class="dialog_table">
        <el-table :data="form.purchaseConsumableBases" style="width: 100%">
          <el-table-column label="序号" width="100">
            <template slot-scope="scope">
              <div> {{ scope.$index + 1 }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="materialNum" label="物料编号" width="180" />
          <el-table-column prop="materialName" label="物料名称" show-overflow-tooltip />
          <el-table-column label="类型">
            <template slot-scope="{row}">
              <dict-tags :options="SparePartsAndConsumables" :value="row.kind" />
            </template>
          </el-table-column>
          <el-table-column prop="model" label="规格型号" show-overflow-tooltip>
            <template slot-scope="{row}">
              <div> {{ row.model || '-' }} </div>
            </template>
          </el-table-column>
          <el-table-column prop="unitName" label="单位" />
          <el-table-column prop="purchaseCount" label="采购数量" />
          <el-table-column prop="lowerLimit" label="库存预警下限" />
          <el-table-column prop="highLimit" label="库存预警上限" />
          <el-table-column prop="purchaseCycle" label="采购周期（天）" />
          <el-table-column prop="replaceCycle" label="更换周期（天）" />
          <el-table-column prop="equipmentNames" label="涉及设备" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href=" scope.row.file"
                target="_blank">
                附件资料</el-link>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template slot-scope="scope">
              <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelectImage(scope.row.image)">
                图片
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin:20px 0 15px 0;color: red;font-size: 12px;">注：审核通过后，新采购品将自动加入系统基值
      </div>
      <el-divider>供应商比选信息</el-divider>
      <el-table :data="form.supplierCompares" max-height="550px" style="width: 100%">
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div> {{ scope.$index + 1 }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" min-width="160" />
        <el-table-column v-if="form.type == 1" prop="materialName" label="采购物料名称" min-width="160" />
        <el-table-column v-if="form.type == 0" prop="materialName" label="采购设备名称" min-width="160" />
        <el-table-column prop="address" label="地址" min-width="160" />
        <el-table-column prop="contact" label="联系人" min-width="160" />
        <el-table-column prop="telephone" label="联系电话" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.telephone || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="官网" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.website || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="file" label="附件" min-width="160">
          <template slot-scope="scope">
            <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href="scope.row.file"
              target="_blank">
              附件资料</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="报价（单价）" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> ￥{{ row.price || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="供应商特点描述" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.description || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelectImage(scope.row.image)">
              图片
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin:20px 0 15px 0;color: red;font-size: 12px;">注：审核通过后，新供应商将自动加入供应商管理模块中
      </div>
      <el-divider>比选结果</el-divider>

      <div class="supplierTitle children">
        <div class="suppliertitle">
          <div>选定供应商：</div>
          <div style="margin-left: 10px;"> {{form.supplierCompare&&form.supplierCompare.supplierName||'-'}} </div>
        </div>
        <div class="suppliertitle">
          <div style="margin-left: 10px;">选定原因：</div>
          <div class="spantitle"> {{form.selectSupplierReason ||'-'}} </div>
        </div>
        <div class="suppliertitle">
          <div style="margin-left: 10px;">采购总价：</div>
          <div class="spantitle" style="font-size: 20px;font-weight: bold;">
            ￥{{form.supplierCompare&&form.supplierCompare.totalPrice ||'-'}} </div>
        </div>
      </div>
      <el-divider>附件信息</el-divider>
      <div class="supplierTitle children">
        <div class="suppliertitle">
          <div style="margin-left: 40px;">图片：</div>
          <div>
            <template>
              <ImagePreview v-for="(item,i) in image(form.images)" :key="i" :src="item.url" :width="100" :height="100"
                style="margin-left: 20px;">
              </ImagePreview>
            </template>
          </div>
        </div>
        <div class="suppliertitle">
          <div style="margin-left: 40px;">附件：</div>
          <div>
            <el-link :disabled="!(form.files)" icon="el-icon-document" type="primary" style="margin-left: 20px;"
              v-for="(item,i) in file(form.files)" :key="i" :href="item" target="_blank">
              附件资料</el-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片显示组件 -->
    <template v-if="ImageOpen">
      <Dialog-image :src="imageSrc" />
    </template>
  </div>
</template>

<script>
import { listDetail } from '@/api/purchasing/purchasing'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      imageSrc: undefined,//图片预览参数
      ImageOpen: false,
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res1 } = await listDetail(this.parentid);
      this.form = res1
      console.log(res1);
    },
    totalPrice (price, num) {
      return (price * num).toFixed(2)
    },
    // 查看图片
    handleSelectImage (src) {
      this.imageSrc = src
      this.ImageOpen = true
    },
    image (img) {
      let arr = img.split(',').map(item => {
        return {
          url: item
        }
      })
      return arr
    },
    file (val) {
      let arr = val.split(',')
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;

  &_image {
    width: 85px;
  }
}

.dialog_table {
  margin-top: 20px;
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
.dialog_left>div:nth-child(2) {
  flex: 10;
  margin-left: 10px
}

/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.supplierTitle {
  width: 100%;

  div {
    margin-top: 20px;
  }

  .spantitle {
    margin-left: 20px;
  }
}

.suppliertitle {
  display: flex;
  font-size: 14px;
  color: #000;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
}
</style>